<template>
    <el-main>
        <el-form>
            <el-form-item>
                <el-button type="success" :icon="Plus" @click="addSortBtn" v-permission="109">新增</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableDate.sortList" style="width: 100%" max-height="600px" row-key="id" border
            :tree-props="{ children: 'children' }" default-expand-all>
            <el-table-column prop="name" label="分类名称" width="160" />
            <el-table-column prop="id" label="ID" />
            <el-table-column label="状态">
                <template #default="scope">
                    <el-switch v-model="scope.row.is_active" inline-prompt active-text="启用" inactive-text="禁用"
                        :width='50' disabled />
                </template>
            </el-table-column>
            <el-table-column prop="ord" label="排序" />
            <el-table-column fixed="right" width="200" align="center" label="操作">
                <template #default="scope">
                    <el-button size="small" type="primary" :icon="Edit" @click="editSortBtn(scope.row)"
                        v-permission="110">编辑</el-button>
                    <DelBtn @delBtn="delSortBtn(scope.row)" :permission="111"></DelBtn>
                </template>
            </el-table-column>
        </el-table>
    </el-main>
    <!-- 新增或编辑弹窗 -->
    <SortAddAndEdit ref="sortRef" :sortParentList="tableDate.sortParentList" @newGetSortList="getSortList">
    </SortAddAndEdit>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from 'vue'

import { Plus, Edit } from '@element-plus/icons-vue'
import { ElMessage } from "element-plus"

import { DialogType } from '@/hooks/useDialog'
import SortAddAndEdit from './SortAddAndEdit.vue'
import DelBtn from '@/components/DelBtn.vue'
import { getArticleSortApi, delArticleSortApi } from '@/http/api/article'

// 定义表格数据
const tableDate = reactive({
    sortList: [],
    sortParentList: [{ value: 0, label: '顶级分类', children: [] },]
})
//获取数据赋值给列表
const getSortList = async () => {
    await getArticleSortApi().then((res) => {
        if (res && res.code == 200) {
            tableDate.sortList = res.data
            tableDate.sortParentList[0].children = res.data
        }
    })
}
// 子组件SortAddAndEdit的ref属性
const sortRef = ref<InstanceType<typeof SortAddAndEdit>>()
// 添加分类
const addSortBtn = () => {
    sortRef.value?.onShow(DialogType.ADD, '添加菜单')
}
// 修改分类
const editSortBtn = (editData: any) => {
    sortRef.value?.onShow(DialogType.EDIT, '修改菜单', editData)
}
// 删除分类
const delSortBtn = async (delData: any) => {
    if (delData.children && delData.children.length > 0) {
        ElMessage.warning('该分类下面还有子分类，不能删除！')
    } else {
        await delArticleSortApi(delData.id).then(res => {
            if (res && res.code == 204) {
                ElMessage.success('删除成功！')
                getSortList()
            } else {
                ElMessage.error(res.msg)
            }
        })
    }

}

onMounted(() => {
    getSortList()
})

</script>

<style scoped lang='scss'>
</style>